<template>
    <div class="right">
        <div class="next" v-show="!store.over">
            <template v-for="(row, _i) in store.next.blocks" :key="Date.now()+''+_i">
                <template v-for="(n, _j) in row" :key="String(Date.now())+''+_j">
                    <div class="block" :class="'block' + n"></div>
                </template>
            </template>
        </div>
        <div class="source">
            <p>等级： {{ store.level }}</p>
            <p>分数： {{ store.source }}</p>
        </div>
        <div class="control">
            <button skin="primary" @click="playHandler">{{ '开始' }}</button>
            <button skin="default" @click="store.reset()">重置</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue'
import tetriStore from '@/store/tetris'

const store = tetriStore()

function playHandler() {
    if (!store.play && store.over) {
        store.reset()
        setTimeout(() => {
            store.play = true
        }, 200)
        return
    }
    store.play = true
    if (store.list.length == 0) {
        store.makeNext()
    }
}
onBeforeMount(() => {
    if (store.list.length == 0) {
        store.makeNext()
    }
})
</script>

<style lang="scss" scoped>
.right {
    flex: 1;
    border: 1px solid var(--border-color);
    border-left: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    .next {
        line-height: 0;
        // border: 1px solid var(--border-color);
        // border-right: none;
        width: calc(var(--block-side) * 4 + 3px);
        height: calc(var(--block-side) * 4 + 3px);
        display: flex;
        flex-wrap: wrap;
        // background-image: var(--block-bg);
        // background-size: calc(var(--block-side) + 1px) calc(var(--block-side) + 1px);
        gap: 1px;
        overflow: hidden;
    }

    .source {
        line-height: 2.5;
    }

    .control {}
}
</style>